<template>
	<view>
		<scroll-view class="list" scroll-y @scrolltolower="loadMore">
			<view class="zcModel-box zcFlex_column">
				<block v-for="(item,index) in PublicArticles" :key="index">
					<view class="zcModel-box-view uni-flex zcAlignI_center" @tap="zcArticleInfo(item)">
						<view class="zcModel-image">
							<image :src="item.File.SUrl?item.File.SUrl:(imgPath+'UniImages/img-23.png')" mode="aspectFit"></image>
						</view>
						<view class="zcModel-item zcFlex_column">
							<view class="zcModel-item-title">{{item.Title}}</view>
							<view class="zcModel-item-content">{{item.Introduce}}</view>
							<view class="zcModel-item-text">{{item.PublishDate}}</view>
						</view>
					</view>
					
				</block>
			</view>
		</scroll-view>
		<view class="uni-tab-bar-loading">
			{{loadingText}}
		</view>
		<view v-if="PublicArticles.length < 1 && isNoDataShow" class="uni-tab-bar-loading" style="text-align: center;">
			<view class="no_model">
				<image :src="imgPath+'UniImages/no_data.png'" mode="widthFix" style="width: 100%;"></image>
				<view class="no_text">暂无数据</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	let _this;
	export default {
		data() {
			return {
				isNoDataShow:false,
				StartRow:0,	//	当前页数据开始下标
				dataLength:0,	//	当前页 数据返回个数
				loadingText:'',
				PublicArticles:[],
				imgPath:this.$ZcPublic.Domain
			}
		},
		onLoad() {
			_this = this;
		},
		onShow() {
			_this.zcQueryNonStopPublicArticleList();
		},
		methods: {
			loadMore() {
				if (_this.dataLength < 20) {
					return;
				}
				_this.loadingText = '加载中';
				_this.zcQueryNonStopPublicArticleList();
			},
			zcQueryNonStopPublicArticleList() {
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_QueryNonStopPublicArticleList',
						Data: {
							StartRow:_this.StartRow,
							RowCount:20
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('文章列表 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							if (resjson.data !== null && resjson.data.length > 0) {
								_this.StartRow = _this.StartRow + resjson.data.length;	// 初始化 下次加载开始下标
								_this.dataLength = resjson.data.length;
								if (_this.dataLength < 20) {
									if (_this.StartRow >= 20) {
										_this.loadingText = '没有更多了...';
									}else{
										_this.loadingText = '';
									}
								}else {
									_this.loadingText = '加载更多...';
								}
								
								for (let i = 0; i < resjson.data.length; i++) {
									_this.PublicArticles.push(resjson.data[i]);
								}
							}else {
								_this.isNoDataShow = true;
							}
						} else{
							
						}
						
					},
					Scope: this
				})
			},
			zcArticleInfo(item) {
				uni.navigateTo({
					url: '../article_info/article_info?SN='+item.SN
				});
			}
		}
	}
</script>

<style>
	.zcModel-box{display: flex;margin: 0 20upx;margin-top: 20upx;}
	.zcModel-box-view{flex-shrink: 0;flex: 1;padding: 20upx;box-sizing: border-box;margin-bottom: 20upx;background-color: #FFFFFF;}
	.zcModel-image{width: 160upx;border-radius: 20upx;overflow: hidden;margin-right: 20upx;height: 160upx;background-color: #F5F5F5;}
	.zcModel-image>image{width: 100%;display: block;height: 100%;border-radius: 20upx;}
	.zcModel-item{display: flex;width: 70%;}
	.zcModel-item-title{font-size: 32upx;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-weight: bold;}
	.zcModel-item-content{height: 32upx;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-height: 1.2;margin: 10upx 0;background-color: #FFFFFF;}
	.zcModel-item-text{color: #999999;}
	
	/* 分页底部说明样式 */
	.uni-tab-bar-loading{text-align: center;margin: 0;}
	
	/* 无数据样式 */
	.no_model{position: relative;display: flex;flex-direction: column;align-items: center;padding: 0 160upx;padding-top: 100upx;}
	.no_text{font-size: 30upx;color: #999999;position: absolute;bottom: 28upx;}
</style>
